<template>
    <u-popup
        :show="visibleShow"
        :overlay="overlay"
        :mode="mode"
        @close="$emit('input', false);$emit('close');"
        @open="$emit('enter');"
        :custom-style="`border-radius:40rpx 40rpx 0 0;height:${height}`"

    >
        <view class="sc-popup top-button" v-if="showTop">
            <view class="left">
                <slot name="top-left"></slot>
            </view>
            <view class="hideBtn saasIcon" @click="$emit('input', false);">&#xe662;</view>
            <view class="right">
                <slot name="top-right"></slot>
            </view>
        </view>

        <slot></slot>
    </u-popup>
</template>

<script>
export default {
    props: {
        mode: {
            type: String,
            default: "bottom",
        },
        overlay: {
            type: Boolean,
            default: true,
        },
        value: {
            type: Boolean,
            default: false,
        },
        height: {
            type: String,
            default: "",
        },
        //是否显示退出按钮
        showTop: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        visibleShow: {
            get() {
                return this.value;
            },
            set() {},
        },
    },
};
</script>
<style lang="scss" scoped>
.sc-popup {
    overflow: hidden;

    &.top-button {
        display: flex;
        justify-content: center;
        align-items: center;

        padding: 0 40rpx;
        padding-top: 28rpx;
        position: relative;

        .left {
            position: absolute;
            left: 0;
        }

        .right {
            position: absolute;
            right: 40rpx;
        }

        .hideBtn {
            width: 88rpx;
            height: 44rpx;
            font-size: 30rpx;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #eaeaea;
            border-radius: 999rpx;
        }
    }
}
</style>
